<template>
  <div class="app-container customer-div">
<!--    <div style="font-size:14px;color:#606266">SAP更新日期：{{JDupdate}}</div>-->
    <el-menu :default-active="listQuery.sendType" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="all">全部</el-menu-item>
      <el-menu-item index="unFinish">未发货</el-menu-item>
      <el-menu-item index="finished">已完成</el-menu-item>
      <el-menu-item index="outTime">超过预计发货时间</el-menu-item>
    </el-menu>
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px" :rules="rules">
        <div class="search-div">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="常用搜索条件" name="1">
              <el-form-item label="订单编号：">
                <el-input v-model="listQuery.orderSn"></el-input>
              </el-form-item>
              <el-form-item label="客户名称：">
                <el-autocomplete
                  clearable
                  class="inline-input"
                  value-key="customerName"
                  :fetch-suggestions="querySearch"
                  v-model="listQuery.customerName"
                  placeholder="请输入内容"
                  @select="handleSelectCustomerName"
                  :trigger-on-focus="false"
                  style="width: 270px;"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item label="品名：" >
                <el-input v-model="listQuery.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="牌号：">
                <el-autocomplete
                  clearable
                  style="width:300px;"
                  class="inline-input"
                  v-model="listQuery.goodsSn"
                  :fetch-suggestions="querySearchGoodsSn"
                  placeholder="请输入内容"
                  @select="handleSelectGoodsSn"
                >
                  <template slot-scope="{ item }">
                    <div>{{ item.goodsSn }}</div>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <el-form-item label="合同流转状态：">
                <el-select v-model="listQuery.orderState" class="input-width" style="width:195px" placeholder="请选择" clearable>
                  <el-option :value="item.orderState" :label="item.text" :key="item.orderState" v-for="item in orderStateList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单日期：">
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.createDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="财务审核时间：">
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.financeConfirmDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="支付状态：">
                <el-select v-model="listQuery.payState"  placeholder="请选择" clearable multiple style="width:150px;">
                  <el-option :key="2" label="已结清" :value="2"></el-option>
                  <el-option :key="1" label="未结清" :value="1"></el-option>
                  <el-option :key="0" label="未支付" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="高级搜索条件" name="2">
              <el-form-item label="财务状态：">
                <el-select v-model="listQuery.financeState"  placeholder="请选择" clearable multiple style="width: 150px">
                  <el-option key="0" label="未审核" value="0"></el-option>
                  <el-option key="1" label="已审核" value="1"></el-option>
                  <el-option key="2" label="已关闭" value="2"></el-option>
                  <el-option key="3" label="部分审核" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="期望发货日期：" >
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.expectSendDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="预计发货时间：">
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.sendDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="取消时间：">
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.financeCancelDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <div style="text-align: right;padding-top:12px;">
            <el-button
              size="small"
              @click="handleSearchList()"
              type="primary">
              查询
            </el-button>
            <el-button
              size="small"
              v-if="purchaseContractDetailsExport"
              :loading="btnLoading2"
              @click="downloadExcel()">
              导出
            </el-button>
            <el-button
              size="small"
              v-if="purchaseContractProfitExport"
              :loading="btnLoading2"
              @click="downloadExcel2()">
              生成报表
            </el-button>
          </div>
        </div>


<!--        <el-form-item label="采购底价：" >-->
<!--          <el-form-item label="" label-width="0" prop="purchaseMinPrice">-->
<!--            <el-input v-model="listQuery.purchaseMinPrice" placeholder="最低价" style="width:100px;"></el-input>-->
<!--          </el-form-item>-->
<!--          <span> - </span>-->
<!--          <el-form-item label="" label-width="0" style="margin-left:10px" prop="purchaseMaxPrice">-->
<!--            <el-input v-model="listQuery.purchaseMaxPrice" placeholder="最高价" style="width:100px;" ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="明确合同约定时间：" >-->
<!--          <el-select v-model="listQuery.isTimeSure" placeholder="请选择" clearable>-->
<!--            <el-option key="1" label="是" value="1"></el-option>-->
<!--            <el-option key="2" label="否" value="2"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单类型：" >-->
<!--          <el-select v-model="listQuery.isMoresuOnlineOrder" class="input-width" style="width:150px" placeholder="请选择" clearable>-->
<!--            <el-option :key="0" label="销售订单" :value="0"></el-option>-->
<!--            <el-option :key="1" label="推广订单" :value="1"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="推广订单是否需要审核：" label-width="150px" v-if="listQuery.isMoresuOnlineOrder == 1">-->
<!--          <el-select v-model="listQuery.isMoresuNeedCheck" class="input-width" style="width:100px" placeholder="请选择" clearable >-->
<!--            <el-option :key="1" label="是" :value="1"></el-option>-->
<!--            <el-option :key="0" label="否" :value="0"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否有推荐人：" >-->
<!--          <el-select v-model="listQuery.isHasIntroducer" class="input-width" style="width:195px" placeholder="请选择" clearable >-->
<!--            <el-option :key="1" label="是" :value="1"></el-option>-->
<!--            <el-option :key="0" label="否" :value="0"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="取消时间(财务已审核订单)：" label-width="200px">-->
<!--          <el-date-picker-->
<!--            :default-time="['00:00:00', '23:59:59']"-->
<!--            v-model="listQuery.checkedCancelDate"-->
<!--            type="daterange"-->
<!--            format="yyyy 年 MM 月 dd 日"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="合同公司：">-->
<!--          <el-input v-model="listQuery.fromCompany" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="采购员：">-->
<!--          <el-select style="width:100px" v-model="listQuery.purchaseChargeUserId" filterable clearable>-->
<!--            <el-option-->
<!--              v-for="item in userOptionList"-->
<!--              :key="item.userId"-->
<!--              :label="item.userName"-->
<!--              :value="item.userId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否过滤订单：">-->
<!--          <el-select style="width:100px" v-model="listQuery.isFilterOrder" clearable>-->
<!--            <el-option label="否" :value="0"></el-option>-->
<!--            <el-option label="是" :value="1"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
    </div>

    <!--数据列表-->
    <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
      合同数量：<span style="font-weight: bold">{{goodsNum}}</span>
      <span style="padding-left:20px;">未发货数量：</span><span style="font-weight: bold">{{unSendNum}}</span>
      <span style="padding-left:20px;">实际未发货数量：</span><span style="font-weight: bold">{{actualUnSendNum}}</span>
      <span style="padding-left:20px;">公司预估毛利：</span><span style="font-weight: bold">{{companyProfit}}</span>
    </div>

    <div class="table-container">
      <el-table
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="订单日期" width="100" align="center" prop="createTime">
        </el-table-column>
        <el-table-column  label="订单号" width="150" align="center">
          <template slot-scope="scope">
            <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
              {{scope.row.orderSn}}
            </el-link>
            <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>
            <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>
          </template>
        </el-table-column>
        <el-table-column
                label-class-name="bgth"
                label="推广订单是否需要审核"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.isMoresuOnlineOrder == 1 ? (scope.row.isMoresuNeedCheck == 1 ? '是' : '否' ): '--'}}
          </template>
        </el-table-column>
        <el-table-column
                label="客户名称"
                width="300">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          label="客户标签"
          width="150">
          <template slot-scope="scope">
            <el-tooltip placement="bottom" effect="light">
              <div slot="content" style="max-width: 400px"> <crm-tag :item="item" v-for="item in scope.row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag></div>
              <div style="padding:0 10px;width:100%; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;">
                <crm-tag :item="item" v-for="item in scope.row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag>
              </div>
            </el-tooltip>

          </template>
        </el-table-column>
        <el-table-column
          label="合同公司"
          align="center"
          width="100">
          <template slot-scope="scope">
            {{scope.row.fromCompany}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="支付状态"
                width="100">
          <template slot-scope="scope">
            {{scope.row.payState | fiferPayState}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="支付时间"
                width="150">
          <template slot-scope="scope">
            {{scope.row.payTime}}
          </template>
        </el-table-column>
        <el-table-column
                label="业务员"
                align="center"
                width="80">
          <template slot-scope="scope">
            {{scope.row.userRealName}}
          </template>
        </el-table-column>
        <el-table-column
          label="采购员"
          align="center"
          width="80">
          <template slot-scope="scope">
            {{scope.row.purchaseUserName}}
          </template>
        </el-table-column>
        <el-table-column
                prop="goodsName"
                label="商品名称"
                width="300">
        </el-table-column>
        <el-table-column
                prop="goodsNum"
                label="合同数量"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                prop="sendNum"
                label="已发货数量"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                prop="unSendNum"
                label="未发货数量"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                prop="actualUnSendNum"
                label="实际未发货数量"
                width="150"
                align="center">
        </el-table-column>
        <el-table-column
                prop="goodsPrice"
                label="合同单价"
                width="100"
                align="center">
        </el-table-column>
        <el-table-column
                label="合计金额"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.goodsAmount}}
          </template>
        </el-table-column>
        <el-table-column
                label="杂费(装卸费)"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.consultation}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同摩叔运费"
                width="80"
                align="center">
          <template slot-scope="scope">
            {{scope.row.freight}}
          </template>
        </el-table-column>
        <el-table-column
                label="采购底价"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.purchasePrice}}
          </template>
        </el-table-column>
        <el-table-column
                label="预估毛利"
                width="100"
                align="center">
          <template slot-scope="scope">
            <span style="color:red">{{scope.row.saleProfit}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预估采购价格"
          width="100"
          align="center">
          <template slot-scope="scope">
            <span >{{scope.row.predictPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际采购价格"
          width="100"
          align="center">
          <template slot-scope="scope">
            <span >{{scope.row.actualPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公司毛利"
          width="100"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.companyProfit}}</span>
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="财务状态"
                width="80">
          <template slot-scope="scope">
            {{scope.row.financeState}}
          </template>
        </el-table-column>
        <el-table-column
                label="行备注"
                width="200">
          <template slot-scope="scope">
            {{scope.row.remark}}
          </template>
        </el-table-column>
        <el-table-column
                label="结算方式"
                width="200">
          <template slot-scope="scope">
            {{scope.row.orderRemark}}
          </template>
        </el-table-column>
        <el-table-column
                label="价格类型"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.priceType}}
          </template>
        </el-table-column>

        <el-table-column
                label="预计发货仓库"
                width="150"
                align="center">
          <template slot-scope="scope">
            {{scope.row.warehouseName}}
          </template>
        </el-table-column>

        <el-table-column
          label="运费承担"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.freightType | fifFreightType }}
          </template>
        </el-table-column>

        <el-table-column
                label="期望发货日期"
                width="120"
                align="center">
          <template slot-scope="scope">
            <span style="vertical-align: middle">{{scope.row.expectSendDate}}</span><img v-if="scope.row.urgentTypeIcon != ''" :src="scope.row.urgentTypeIcon" style="width:14px;vertical-align: middle;margin-left:5px"/>
          </template>
        </el-table-column>
        <el-table-column
                label="发货紧急度"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.urgentTypeStr}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同约定时间"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.timeSureDate}}
          </template>
        </el-table-column>
        <el-table-column
                label="预计发货日期"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.sendDate}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同流转状态"
                width="150"
                align="center">
          <template slot-scope="scope">
            {{scope.row.orderStateStr}}
          </template>
        </el-table-column>

        <el-table-column
          label="介绍类型"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.introduceType  }}
          </template>
        </el-table-column>
        <el-table-column
          label="介绍人"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{scope.row.introduceName }}
          </template>
        </el-table-column>
        <el-table-column
          label="财务审核时间"
          width="150"
          align="center">
          <template slot-scope="scope">
            {{scope.row.financeConfirmTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="取消时间"
          width="130"
          align="center">
          <template slot-scope="scope">
            {{scope.row.financeCancelTime}}
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
      </el-pagination>
    </div>

  </div>
</template>
<script>
  import {getCustomerOption,myDeptList,saleOrderList,getOrderStatList,getOrderUsersList,getSaleDetailList,exportDetailList,getKingInfo,orderGoodsList} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  import {validateCommission} from '@/utils/validate';
  import {exportDetailListProfit} from "../../api/partner";
  import crmTag from "@/views/components/crmTag";
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    createDate:null,
    orderState:null,
    orderSn:'',
    userId:null,
    goodsName:'',
    customerName:'',
    financeState:[],
    expectSendDate:null,
    purchaseMinPrice:null,
    purchaseMaxPrice:null,
    sendType:'all',
    sendDate:null,
    payState:[],
    isMoresuOnlineOrder:null,
    isMoresuNeedCheck:null,
    kingGoodsId:'',
    isHasIntroducer:'',
    financeConfirmDate:[],
    financeCancelDate:[],
    fromCompany:'',
    purchaseChargeUserId:'',
    isFilterOrder:'',
    checkedCancelDate:[],
    goodsSn:''
  };
  export default {
    name: "index",
    data(){
      const purchaseMinPrice = (rule, value, callback) => {
        let MinPrice = this.listQuery.purchaseMinPrice !='' ? parseFloat(this.listQuery.purchaseMinPrice) : '';
        let MaxPrice = this.listQuery.purchaseMaxPrice !='' ? parseFloat(this.listQuery.purchaseMaxPrice) : '';
        if(MinPrice == ''){
          callback()
        }else if (!validateCommission(parseFloat(MinPrice))) {
          this.listQuery.purchaseMinPrice = '';
          callback()
        } else if(MaxPrice != ''  && MinPrice > MaxPrice){
          this.listQuery.purchaseMinPrice = MaxPrice;
          callback()
        }else {
          callback()
        }
      };
      const purchaseMaxPrice = (rule, value, callback) => {
        let MinPrice = this.listQuery.purchaseMinPrice!='' ? parseFloat(this.listQuery.purchaseMinPrice) : '';
        let MaxPrice = this.listQuery.purchaseMaxPrice!='' ? parseFloat(this.listQuery.purchaseMaxPrice) : '';
        if(MaxPrice == ''){
          callback()
        }else if (!validateCommission(parseFloat(MaxPrice))) {
          this.listQuery.purchaseMaxPrice = '';
          callback()
        } else if(MinPrice != ''  && MaxPrice < MinPrice){
          this.listQuery.purchaseMaxPrice = MinPrice;
          callback()
        }else {
          callback()
        }
      };
      return {
        activeIndex: '1',
        creator:'',
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count: 0,
        listLoading: false,
        customerStateList: [],
        userOptionList:[],
        roles:store.getters.roles ? store.getters.roles : [],
        deptList:[],
        orderStateList:[],
        btnLoading2:false,
        JDupdate:'',
        rules:{
          purchaseMinPrice :[{ trigger: 'blur' ,validator: purchaseMinPrice}],
          purchaseMaxPrice :[{ trigger: 'blur' ,validator: purchaseMaxPrice}],
        },
        goodsNum:'',
        unSendNum:'',
        actualUnSendNum:'',
        companyProfit:'',
        goodsList:[],
        btnLoading3:false,
        activeNames:['1','2']
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),

      isCanSaleByDept(){
        if(this.roles.indexOf("saleDept") != -1){
          return true
        }else{
          return false
        }
      },
      isCanSaleByAll(){
        if(this.roles.indexOf("saleAll") != -1){
          return true
        }else{
          return false
        }
      },
      purchaseContractDetailsExport(){
        if(this.roles.indexOf("purchaseContractDetailsExport") != -1){
          return true
        }else{
          return false
        }
      },
      purchaseContractProfitExport(){
        if(this.roles.indexOf("purchaseContractProfitExport") != -1){
          return true
        }else{
          return false
        }
      },
    },
    created() {
      if (localStorage.getItem('purchaseContractDetailsQuery')){
        this.listQuery = JSON.parse(localStorage.getItem('purchaseContractDetailsQuery'));
        localStorage.removeItem('purchaseContractDetailsQuery');
      }
      let time = new Date();
      let day = time - time % (24 * 60 * 60 * 1000) - 8 * 60 * 60 * 1000;
      let end = new Date(day + 24 * 60 * 60 * 1000-1000);
      let start = new Date(day - 7*24 * 60 * 60 * 1000);
      let endDate = formatDate(end, 'yyyy-MM-dd hh:mm:ss');
      let startDate = formatDate(start, 'yyyy-MM-dd hh:mm:ss');
      this.listQuery.createDate = [startDate,endDate];
      this.getList();
      this.getUserOptionList();
      this.getDeptList();
      this.getOrderStatListData();
      this.getOrderGoodsList();
      getKingInfo().then((res)=>{
        this.JDupdate = res.orderUpdateTime;
      })

    },
    components:{crmTag},
    filters: {
      fiferPayState(val){
        if(val == 0){
          return '未支付'
        }else if(val == 1){
          return '未结清'
        }else if(val == 2){
          return '已结清'
        }
      },
      formatCreateTime(time) {
        if(time){
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }else{
          return '--'
        }
      },
      fifFreightType(val){
        if(val == 'sale'){
          return '销售承担运费'
        }else if(val == 'purchase'){
          return '采购承担运费'
        }
      },
    },
    methods:{
      handleSelectGoodsSn(item){
        this.listQuery.goodsSn = item.goodsSn
      },

      querySearchGoodsSn(queryString, cb){
        let restaurants = this.goodsList;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.goodsSn.indexOf(queryString)!=-1);
        };
      },
      getOrderGoodsList(){
        orderGoodsList().then((res)=>{
          this.goodsList = res.list
        })
      },
      toOrderDetail(orderId){
        let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:orderId,type:'caiWu'}});
        window.open(routeData.href);
      },
      //获取订单状态列表
      getOrderStatListData(){
        getOrderStatList().then((res)=>{
          this.orderStateList = res;
        })
      },
      //获取我的部门列表
      getDeptList(){
        myDeptList().then((res)=>{
          this.deptList = res;
        })
      },
      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList({departmentType:'purchase'  }).then((res)=>{
          this.userOptionList = res;
        })
      },

      //选择员工名称
      handleSelectUserName(key,item){
        this.listQuery[key] = item.userId;
      },


      //客户名称输入匹配
      querySearch(queryString, cb){
        getCustomerOption({keywords:queryString}).then((res)=>{
          cb(res);
        })
      },


      //选择客户名称
      handleSelectCustomerName(item){
        this.listQuery.keywords = item.customerName
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
        this.listQuery.sendType = key;
        this.handleSearchList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取合同明细列表
      getList() {
        this.listLoading = true;
        let listQuery = JSON.parse(JSON.stringify(this.listQuery));
        if(listQuery.isMoresuOnlineOrder != 1){
          listQuery.isMoresuNeedCheck = null;
        }
        getSaleDetailList(listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.goodsNum = response.summary.goodsNum;
          this.unSendNum = response.summary.unSendNum;
          this.actualUnSendNum = response.summary.actualUnSendNum;
          this.companyProfit = response.summary.companyProfit;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },

      //去详情页
      toDetail(type,item){
        localStorage.setItem('purchaseContractDetailsQuery', JSON.stringify(this.listQuery));
        this.$router.push({name:'saleDetail',query:{id:item.customerId,type:type}})
      },

      //下载excle
      downloadExcel2(){
        this.btnLoading3 = true;
        exportDetailListProfit(this.listQuery).then((res)=>{
          this.btnLoading3 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnLoading3 = false;
        })
      },

      //下载excle
      downloadExcel(){
        this.btnLoading2 = true;
        exportDetailList(this.listQuery).then((res)=>{
          this.btnLoading2 = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnLoading2 = false;
        })
      },

      //下载表格数据格式化
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

    },
  }
</script>

<style scoped lang="scss">
  .upload-div{
    text-align: center;
    position:relative;
    #upload{
      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>
